<!-- 公共表格 -->
<template>
  <div>
    <div class="top">
      <div class="left">
        <div v-for="item in state" :key="item" class="input-box">
          <div class="input-label">{{ item }}</div>
          <input type="text" placeholder="请输入">
        </div>
      </div>
      <div class="right">
        <el-button type="info" round>搜索</el-button>
        <el-button type="warning" round>重置</el-button>
      </div>
    </div>
    <div class="bottom">
      <div class="b-top">
        <el-button type="info" round>新增仓库</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <!-- <el-table-column /> -->
        <template>
          <el-table-column
            type="index"
            :index="indexMethod"
            width="60"
            label="序号"
          />
          <el-table-column
            v-for="item in headerList"
            :key="item.prop"
            v-bind="item"
            width="150"
            :fixed="item.bollen"
          >
            <template #default="scope">
              <slot>{{ scope.row[item.prop] }}</slot>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="150" label="操作">
            <template #default="scope">
              <el-button type="text" size="small" @click="changeFn(scope.row.id)">编辑</el-button>
              <el-button v-if="isShow" type="text" size="small" @click="openFn(scope.row.id)">启用</el-button>
              <el-button v-else type="text" size="small" @click="closeFn(scope.row.id)">停用</el-button>
              <el-button type="text" size="small" @click="delFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </template>
        <div class="block">
          <el-pagination
            :current-page="params.page"
            :page-size="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {}
    },
    headerList: {
      type: Array,
      default: () => {}
    },
    state: {
      type: Array,
      default: () => {}
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      compileList: {
        'CW': '常温',
        'LC': '冷藏',
        'HW': '恒温'
      },
      isShow: true
    }
  },
  async created() {
    await this.compile()
    // function compile() {
    //   this.tableData.forEach(item => {
    //     console.log(item)
    //   })
    // }
  },
  methods: {
    compile() {
      this.tableData.forEach(item => {
        console.log(item)
      })
    },
    indexMethod(index) {
      return ++index
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
    },
    changeFn(val) {
      console.log(val)
    },
    openFn(val) {
      console.log(val)
    },
    closeFn(val) {
      console.log(val)
    },
    delFn(val) {
      console.log(val)
    }
  }
}

</script>
<style lang='scss' scoped>
.box-card {
    width: 1617px;
    margin: 0 auto;
    border-radius: 12px;
  }
.top {
  padding: 30px;
  margin: 35px 30px;

  // margin-top: 35px;
  // margin-bottom: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142);
  display: flex;
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    .input-box {
      width: 264px;
      margin: 0 10px;
      padding: 6px 16px;
      border-radius: 6px;
      input {
        height: 40px;
        width: 100%;
        line-height: 40px;
        background: #f8f5f5;
        border-radius: 6px;
        text-indent: 1em;
      }
      .input-label {
        line-height: 18px;
        padding-bottom: 10px;
        padding-left: 5px;
        font-weight: 500;
        color: #887e7e;
        font-size: 12px;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
  }
}
 .el-table__row {
  td {
    height: 46px;
    padding: 0;
  }
}
.el-table .el-table__cell {
  text-align: center;
}
.bottom {
  // padding: 30px;
  border-radius: 12px;
  margin: 35px 30px;
  box-shadow: 0 0 6px 0 rgb(144 142 142);
  // margin-top: 35px;
  // height: 300px;
  background-color: #fff;
  .is-round {
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
</style>
